<template>
  <div class="capsule">
    <infoText ref="infoText"></infoText>
    <img class="image" src="./img1/bg.png" alt="" />
    <div id="stage"></div>
    <div id="btn1">开始</div>
  </div>
</template>

<script>
import Matter from 'matter-js'

export default {
  data() {
    return {
      timer1: null,
    }
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '幸运扭蛋机',
    })
    let ww = uni.upx2px(504)
    let hh = uni.upx2px(276)
    let engine = Matter.Engine.create(),
      world = engine.world,
      render = Matter.Render.create({
        element: document.querySelector('#stage'),
        engine: engine,
        options: {
          height: hh,
          width: ww,
          background: 'rgba(0,0,0,0)',
          wireframes: false,
        },
      })

    Matter.Runner.run(engine)
    Matter.Render.run(render)

    create_borders() //创建边框
    init_ball() //初始化一个球

    // 创建四周边框
    function create_borders() {
      const option = { isStatic: true, render: { fillStyle: '#000' } }
      const w = render.canvas.width
      const h = render.canvas.height
      const size = 2
      Matter.World.add(world, [
        Matter.Bodies.rectangle(w / 2, size / 2, w, size, option),
        Matter.Bodies.rectangle(w / 2, h - size / 2, w, size, option),
        Matter.Bodies.rectangle(size / 2, h / 2, size, h, option),
        Matter.Bodies.rectangle(w - size / 2, h / 2, size, h, option),
      ])
    }

    function randomNum(m, n) {
      // 随机数 [Number, Number]
      return Math.floor(Math.random() * (n - m + 1) + m)
    }

    // 创建一个静止的球
    function init_ball() {
      for (let i = 0; i < 10; i++) {
        let ball = Matter.Bodies.circle(ww / 2, 50, 16, {
          restitution: 1,
          render: {
            fillStyle: 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')',
          },
        })
        // Matter.Body.setStatic(ball, true)
        Matter.World.add(world, ball)
      }
    }

    let door1 = true

    document.querySelector('#btn1').onclick = () => {
      if (door1) {
        door1 = false
        shakeScene()
        setTimeout(() => {
          door1 = true
          this.$refs.infoText.show()
        }, 3000)
      }
    }

    function shakeScene() {
      var bodies = Matter.Composite.allBodies(engine.world)

      for (var i = 0; i < bodies.length; i++) {
        var body = bodies[i]

        var forceMagnitude = 0.02 * body.mass

        Matter.Body.applyForce(body, body.position, {
          x: (forceMagnitude + Matter.Common.random() * forceMagnitude) * Matter.Common.choose([1, -1]),
          y: -forceMagnitude + Matter.Common.random() * -forceMagnitude,
        })
      }
    }
  },
}
</script>

<style scoped>
.capsule {
  background: #323d4e;
  position: relative;
  min-height: 100vh;
}
.image {
  width: 100%;
}
#stage {
  position: absolute;
  top: 504rpx;
  left: 140rpx;
  width: 504rpx;
  height: 276rpx;
}
#btn1 {
  color: #fff;
  width: 80vw;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background: #409eff;
  border-radius: 90rpx;
  position: fixed;
  bottom: 100rpx;
  left: 50%;
  transform: translateX(-50%);
}
</style>
